<template>

  <el-dialog title="网关通道集合交易限制" :visible.sync="dialogVisible" width="85%" :close-on-click-modal="false">

    <el-form ref="main-form" :model="form" :rules="rules" label-width="350px" label-position="right" :inline="true" >
      <el-form-item label="网关通道集合" size="mini" prop="collectionName">
        <el-input v-model="form.collectionName" disabled></el-input>
      </el-form-item>

      <el-form-item label="终端名称" size="mini" prop="terName">
        <el-input v-model="form.terName" disabled></el-input>
      </el-form-item>

      <el-form-item label="终端号" size="mini" prop="terNo">
        <el-input v-model="form.terNo" disabled></el-input>
      </el-form-item>

      <div v-for="(channel, key) in form.conn">
        <h4>调度通道</h4>
        <el-form-item label="调度级别" size="mini">
          <el-input type="number" v-model="channel.sort" disabled></el-input>
        </el-form-item>

        <el-form-item label="通道名称" size="mini">
          <el-input v-model="channel.channelName" disabled></el-input>
        </el-form-item>

        <el-row>
          <el-form-item label="单笔金额限制（单位元）" size="mini">
            <el-input type="number" v-model="channel.amountLimit" @keyup.enter.native="submit" clearable></el-input>
          </el-form-item>  
        </el-row>

        <el-form-item label="日交易笔数限制（单位笔）" size="mini">
          <el-input type="number" v-model="channel.dayCountLimit" @keyup.enter.native="submit" clearable></el-input>
          <!-- <div>总：{{ channel.totalDayCountLimit }} / 已分配：{{ channel.sumDayCountLimit }}</div> -->
          <div>总：{{ channel.totalDayCountLimit }}</div>
        </el-form-item>

        <el-form-item label="月交易笔数限制（单位笔）" size="mini">
          <el-input type="number" v-model="channel.monthCountLimit" @keyup.enter.native="submit" clearable></el-input>
          <!-- <div>总：{{ channel.totalMonthCountLimit }} / 已分配：{{ channel.sumMonthCountLimit }}</div> -->
          <div>总：{{ channel.totalMonthCountLimit }}</div>
        </el-form-item>

        <el-form-item label="日交易总金额限制（单位元）" size="mini">
          <el-input type="number" v-model="channel.dayAmountLimit" @keyup.enter.native="submit" clearable></el-input>
          <!-- <div>总：{{ channel.totalDayAmountLimit }} / 已分配：{{ channel.sumDayAmountLimit }}</div> -->
          <div>总：{{ channel.totalDayAmountLimit }}</div>
        </el-form-item>

        <el-form-item label="月交易总金额限制（单位元）" size="mini">
          <el-input type="number" v-model="channel.monthAmountLimit" @keyup.enter.native="submit" clearable></el-input>
          <!-- <div>总：{{ channel.totalMonthAmountLimit }} / 已分配：{{ channel.sumMonthAmountLimit }}</div> -->
          <div>总：{{ channel.totalMonthAmountLimit }}</div>
        </el-form-item>

        <el-form-item label="日交易总金额限制阈值（百分比）" size="mini">
          <el-input type="number" v-model="channel.dayAmountThreshold" @keyup.enter.native="submit" clearable></el-input>
        </el-form-item>

        <el-form-item label="月交易总金额限制阈值（百分比）" size="mini">
          <el-input type="number" v-model="channel.monthAmountThreshold" @keyup.enter.native="submit" clearable></el-input>
        </el-form-item>
      </div>

    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="close" size="small">取 消</el-button>
      <el-button type="primary" @click="submit" size="small" :loading="loading">提 交</el-button>
    </div>

  </el-dialog>
</template>

<script>

import ApiMain from '@/api/mch.ter';

export default {
  mixins: [
  ],
  props: [
  ],
  data () {
    return {

      dialogVisible: false,
      popDeleteVisible: false,
      loading: false,
      isSettingLoad: false,

      form: {
        collectionName: '',
        terName: '',
        terNo: '',
        conn: [],
      },

      rules: {
      },

      id  : null,
      data: null,

    }
  },

  methods: {

    show (id = null) {

      this.id = id;
      if (this.id) {
        this.fetchData();
      }
      else {
        this.reset();
      }

      this.dialogVisible = true;
    },

    close () {
      this.dialogVisible = false;
      this.reset();
      this.$emit('dialog-close');
    },

    reset () {
      this.form = {
        collectionName: '',
        conn: []
      };
    },

    fetchData () {

      ApiMain.channelLimit({terId: this.id})
      .then(re => {
        this.data = re; 
      })
      .catch(() => {
        this.data = null;
      })
      .finally(() => {
        this.renderData();
      });
    },

    renderData () {
      this.form.collectionName = this.data.collectionName;
      this.form.terName = this.data.terName;
      this.form.terNo = this.data.terNo;
      let conn = [];
      for (var i in this.data.conn) {
        let tmp = {};
        tmp = {
          sort: this.data.conn[i].sort,
          channelId: this.data.conn[i].channelId,
          channelName: this.data.conn[i].channelName,
          amountLimit: this.data.conn[i].amountLimit / 100,
          dayCountLimit: this.data.conn[i].dayCountLimit,
          monthCountLimit: this.data.conn[i].monthCountLimit,
          dayAmountLimit: this.data.conn[i].dayAmountLimit / 100,
          monthAmountLimit: this.data.conn[i].monthAmountLimit / 100,
          dayAmountThreshold: this.data.conn[i].dayAmountThreshold,
          monthAmountThreshold: this.data.conn[i].monthAmountThreshold,

          sumDayCountLimit: this.data.conn[i].sumDayCountLimit,
          sumMonthCountLimit: this.data.conn[i].sumMonthCountLimit,
          sumDayAmountLimit: this.data.conn[i].sumDayAmountLimit / 100,
          sumMonthAmountLimit: this.data.conn[i].sumMonthAmountLimit / 100,
          sumDayAmountThreshold: this.data.conn[i].sumDayAmountThreshold,
          sumMonthAmountThreshold: this.data.conn[i].sumMonthAmountThreshold,

          totalDayCountLimit: this.data.conn[i].totalDayCountLimit,
          totalMonthCountLimit: this.data.conn[i].totalMonthCountLimit,
          totalDayAmountLimit: this.data.conn[i].totalDayAmountLimit / 100,
          totalMonthAmountLimit: this.data.conn[i].totalMonthAmountLimit / 100,
          totalDayAmountThreshold: this.data.conn[i].totalDayAmountThreshold,
          totalMonthAmountThreshold: this.data.conn[i].totalMonthAmountThreshold,
        }
        conn.push(tmp);
      }
      this.form.conn = conn;
    },

    verifyForm () {
      var bool = true;
      this.$refs['main-form'].validate((valid) => bool = valid);
      return bool;
    },

    async submit () {

      if (! this.verifyForm()) return false;

      for (var i in this.form.conn) {
        // if (this.form.conn[i].amountLimit <= 0) {
        //   this.$message.info('调度通道每单限额应大于0')
        //   return 
        // }
        // if (this.form.conn[i].dayCountLimit <= 0) {
        //   this.$message.info('调度通道每日交易总单数应大于0')
        //   return 
        // }
        // if (this.form.conn[i].monthCountLimit <= 0) {
        //   this.$message.info('调度通道每月交易总单数应大于0')
        //   return 
        // }
        // if (this.form.conn[i].dayAmountLimit <= 0) {
        //   this.$message.info('调度通道每日交易总金额应大于0')
        //   return 
        // }
        // if (this.form.conn[i].monthAmountLimit <= 0) {
        //   this.$message.info('调度通道每月交易总金额应大于0')
        //   return 
        // }
        // if (this.form.conn[i].dayAmountThreshold <= 0 || this.form.conn[i].dayAmountThreshold > 100) {
        //   this.$message.info('调度通道每日交易总金额阈值应在0-100区间')
        //   return 
        // }
        // if (this.form.conn[i].monthAmountThreshold <= 0 || this.form.conn[i].monthAmountThreshold > 100) {
        //   this.$message.info('调度通道每月交易总金额阈值应在0-100区间')
        //   return 
        // }
      }

      this.loading = true;

      try {
        await this.submitSet();
      } finally {
        this.loading = false;
      }
    },

    async submitSet () {

      this.form.terId = this.id;
      await ApiMain.setChannelLimit(this.handleForm());
      this.$message({message: '修改成功', type: 'success'});
      this.close();

    },

    // 处理参数
    handleForm () {
      // 直接达到深拷贝的效果
      let form = JSON.parse(JSON.stringify(this.form))
      for (var i in form.conn) {
        form.conn[i].amountLimit = form.conn[i].amountLimit == '' ? 0 : form.conn[i].amountLimit * 100
        form.conn[i].dayCountLimit = form.conn[i].dayCountLimit == '' ? 0 : form.conn[i].dayCountLimit
        form.conn[i].monthCountLimit = form.conn[i].monthCountLimit == '' ? 0 : form.conn[i].monthCountLimit
        form.conn[i].dayAmountLimit = form.conn[i].dayAmountLimit == '' ? 0 : form.conn[i].dayAmountLimit * 100
        form.conn[i].monthAmountLimit = form.conn[i].monthAmountLimit == '' ? 0 : form.conn[i].monthAmountLimit * 100
        form.conn[i].dayAmountThreshold = form.conn[i].dayAmountThreshold == '' ? 0 : form.conn[i].dayAmountThreshold
        form.conn[i].monthAmountThreshold = form.conn[i].monthAmountThreshold == '' ? 0 : form.conn[i].monthAmountThreshold
      }
      
      return form
    },

  }
}
</script>

<style>

</style>
